<template>
<div>
     <el-card class="box-card">
    <el-button type="success" size="small" @click="addFirst" style="float:left">添加一级分类</el-button>
    <el-button type="success" size="small" @click="addSecond" style="float:left">添加二级分类</el-button>
    <el-button type="success" size="small" @click="addThird" style="float:left">添加三级分类</el-button>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="catagName"
      label="类名"
      width="180">
    </el-table-column>
    <el-table-column
      label="级别"
      width="180">
          <template  slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cataType === 1">一级</el-tag>
                    <el-tag size="mini" type="success" v-else-if="scope.row.cataType === 2">二级</el-tag>
                    <el-tag size="mini" type="warning" v-else>三级</el-tag>
                </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-card>
<!-- 编辑面板 -->
 <el-dialog :title="编辑" width="40%" :visible.sync="iconFormVisible">
      <el-form :model=" catInfo" class="demo-form-inline" :label-position="right">
        <el-form-item label="分类名">
          <el-input v-model="catInfo.catagName" placeholder="分类名" ></el-input>
        </el-form-item>
            </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="iconFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit()">确 定</el-button>
      </div>
    </el-dialog>

 <el-dialog title="添加一级分类" width="40%" :visible.sync="FirstFormVisible">
      <el-form :model=" firstInfo" class="demo-form-inline" :label-position="right">
        <el-form-item label="分类名">
          <el-input v-model="firstInfo.catagName" placeholder="请输入一级分类名" ></el-input>
        </el-form-item>
        <!-- <el-form-item label="级别">
          <el-input v-model="firstInfo.cataType"  placeholder="一级" disabled ></el-input>
        </el-form-item> -->
            </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFirst()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 二级分类和 -->
    <el-dialog :title="disTitile" width="40%" :visible.sync="SecondVisible">
          <el-form :model=" SecondInfo" class="demo-form-inline" :label-position="right">
            <el-form-item label="分类名">
              <el-input v-model="SecondInfo.catagName" placeholder="请输入二级分类名" ></el-input>
            </el-form-item>
            <!-- <el-form-item label="级别">
              <el-input v-model="SecondInfo.cataType"  placeholder="" disabled ></el-input>
            </el-form-item> -->
            <el-form-item label="一级" >
            <!-- 在此处传参父类分类id -->
            <el-cascader :options="option" :props="cateProps" clearable @change="handleChange"></el-cascader>
            </el-form-item>
                </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitSecond()">确 定</el-button>
          </div>
    </el-dialog>
      <!-- 三级分类 -->
    <el-dialog title="添加三级分类" width="40%" :visible.sync="ThirdVisible">
          <el-form :model=" ThirdInfo" class="demo-form-inline" :label-position="right">
            <el-form-item label="分类名">
              <el-input v-model="ThirdInfo.catagName" placeholder="请输入三级分类名" ></el-input>
            </el-form-item>
            <!-- <el-form-item label="级别">
              <el-input v-model="SecondInfo.cataType"  placeholder="" disabled ></el-input>
            </el-form-item> -->
            <el-form-item label="二级" >
            <el-cascader :options="toption" :props="cateProps" clearable @change="ThandleChange"></el-cascader>
            </el-form-item>
                </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitThird()">确 定</el-button>
          </div>
    </el-dialog>
</div>
</template>
<script>
import { getAllCate, addCate, getCateByType, editCate, delCate } from '@/api/category'
// import qs from 'qs'
export default {

  data () {
    return {
      disTitile: '添加二级分类',
      FirstFormVisible: false,
      iconFormVisible: false,
      SecondVisible: false,
      catInfo: {
        id: '',
        catagName: ''
      },
      ThirdVisible: false,
      firstInfo: {
        catagName: '',
        cataType: ''
      },
      SecondInfo: {
        // 一级分类id
        parentCatag: '',
        catagName: '',
        cataType: 2
      },
      ThirdInfo: {
        parentCatag: '',
        catagName: '',
        cataType: 3
      },
      toption: [],
      option: [],
      cateProps: {
        value: 'id',
        label: 'catagName'
      },
      options: [{
        value: 1,
        label: '一级'
      }, {
        value: 2,
        label: '二级'
      }, {
        value: 3,
        label: '三级'
      }
      ],
      tableData: []

    }
  },
  created () {
    this.getAllCategories()
    this.getAllFirst()
    this.getAllSecond()
  },
  watch: {

  },
  methods: {
    // 获取所有分类
    getAllCategories () {
      getAllCate().then(res => {
        // console.log(res.data.data)
        this.tableData = res.data.data
      })
    },
    handleEdit (index, row) {
      this.catInfo = row
      this.iconFormVisible = true
      this.rowIndex = index
      this.catInfo.id = row.id
    },
    addFirst () {
      this.firstInfo = {}
      this.FirstFormVisible = true
      this.firstInfo.cataType = 1
    },
    // 提交添加的一级分类
    submitFirst () {
      // console.log(this.firstInfo)
      const data = {
        ...this.firstInfo,
        parentCatag: -1
      }
      // console.log(JSON.stringify(data))
      addCate(JSON.stringify(data)).then(res => {
        console.log(res)
      })
      this.getAllCategories()
      this.FirstFormVisible = false
    },
    // 获取所有的一级分类
    getAllFirst () {
      getCateByType(1).then(res => {
        this.option = res.data.data
        console.log(this.option)
      })
    },
    // 获取所有的二级分类
    getAllSecond () {
      getCateByType(2).then(res => {
        this.toption = res.data.data
        console.log(res.data.data)
      })
    },
    // 获取一级分类id
    handleChange (value) {
      this.SecondInfo.parentCatag = value
      // console.log(value)
    },
    ThandleChange (value) {
      this.ThirdInfo.parentCatag = value
      console.log(value)
    },
    // 添加二级分类
    addSecond () {
      this.disTitile = '添加二级分类'
      this.SecondVisible = true
    },
    addThird () {
      this.ThirdVisible = true
    },
    submitSecond () {
      const data = {
        ...this.SecondInfo,
        parentCatag: this.SecondInfo.parentCatag[0]
      }
      // console.log(this.SecondInfo)
      console.log(data)
      addCate(data).then(res => {
        console.log(res)
        this.getAllCategories()
        this.getAllSecond()
        this.SecondVisible = false
      })
    },
    submitThird () {
      console.log(this.ThirdInfo)
      const data = {
        ...this.ThirdInfo,
        parentCatag: this.ThirdInfo.parentCatag[0]
      }
      console.log(data)
      addCate(data).then(res => {
        console.log(res)
        this.getAllCategories()
        this.ThirdVisible = false
      })
    },

    // 编辑分类提交
    editSubmit () {
      console.log('edit')
      editCate(this.catInfo).then(res => {
        console.log(res)
        this.iconFormVisible = false
      })
    },

    // 获取删除行当前id
    // 删除分类
    handleDelete (index, row) {
      this.tableData.id = row.id
      console.log(row.id)
      delCate(this.tableData.id).then(res => {
        console.log(res)
        this.getAllCategories()
        this.getAllSecond()
      }).catch(err => {
        console.log(err)
        this.$message.error('删除失败')
      })
    }

  }

}
</script>
